<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>traits.js - Traits for Javascript</title>
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="styles.css" />
  <link rel="stylesheet"
        type="text/css"
        media="screen"
        href="sidebar.css" />
  <link href="prettify.css" type="text/css" rel="stylesheet" />
  <script type="text/javascript" src="prettify.js"></script>      
</head>

<body onload="prettyPrint()">
  <div id="pageHeader">
    <!-- Start page header -->

    <h1>traits<span style="color: orange">.js</span></h1>

    <h2>Traits for Javascript</h2>

    <div id="navcontainer">
      <!-- Start Navigation -->

      <ul>
        <li><a href="index.html"
           rel="self"
           id="current"
           name="current">Home</a></li>

        <li><a href="http://code.google.com/p/es-lab/downloads/list?can=2&amp;q=label:traits&amp;colspec=Filename+Summary+Uploaded+Size+DownloadCount" target="_top">Download</a></li>

        <li><a href="api.html"
           rel="self">API</a></li>

        <li><a href="tutorial.html"
           rel="self">Tutorial</a></li>

        <li><a href=
        "http://code.google.com/p/es-lab/issues/list?q=label%3Atraits" target="_top">Bug Tracker</a></li>

        <li><a href="http://groups.google.com/group/traits-js?hl=en" target="_top">Discuss</a></li>
        
        <li><a href="http://howtonode.org/traitsjs" target="_top">HowToNode article</a></li>
        
        <li><a href="http://es-lab.googlecode.com/files/traitsJS_PLASTIC2011_final.pdf" target="_top">Paper</a></li>
      </ul>
    </div><!-- End navigation -->
  </div><!-- End page header -->

  <div id="container">
    <!-- Start container -->

    <div id="contentTop"></div>

    <div id="sidebarContainer">
      <!-- Start Sidebar wrapper -->

      <div id="sidebar">
        <!-- Start sidebar content -->

        <h1 class="sideHeader"></h1><!-- Sidebar header -->

        <br />
        <!-- sidebar content you enter in the page inspector -->
         <!-- sidebar content such as the blog archive links -->
      </div><!-- End sidebar content -->
    </div><!-- End sidebar wrapper -->

    <div id="contentContainer">
      <!-- Start main content wrapper -->

      <div id="content">
        <!-- Start content -->

        <div class="intro"><em>traits.js</em> is a minimal, standards-compliant trait
        composition library for Javascript.</div>
        <div class="download">
          <a href="files/traits.js">
            <img style="float: left; border: none;"
                 src="images/download.png" height="80px" caption="download"></img>
            <table class="downloadtitle">
              <tr><td><strong>Download</strong></td></tr>
              <tr><td class="version">v0.4</td></tr>
            </table>
          </a>
        </div>
        
        <p style="clear:both; padding-top: 20px">Here is <a href="http://code.google.com/p/es-lab/source/browse/#svn/trunk/src/traits">the latest development version</a>.<br>traits.js is also available as <a href="http://npm.mape.me/">an npm package</a> named 'traits' (thanks to Nathan Stott).
              
        <h4>Why traits?</h4>
        
        <p><a href="http://en.wikipedia.org/wiki/Trait_(computer_science)">Traits</a> are
        a flexible language feature to factor out and recombine reusable pieces of code.
        They are a more robust alternative to multiple inheritance or mixins.
        They are more robust because name clashes must be resolved explicitly by composers,
        and because trait composition is order-independent (hence more declarative).
        To put it simply: if you combine two traits that define a method with the same name,
        your program will fail. Traits won't automatically give precedence to either one.      
                
        <h4>Why traits.js?</h4>
        
        <p>Because it's minimal, easy to understand and because it plays nicely
           with the new
           <a href="http://ejohn.org/blog/ecmascript-5-objects-and-properties/">object-manipulation API</a>
          defined on <tt>Object</tt> in <a href="http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-262.pdf">Ecmascript 5th edition</a>.
        
        <p><em>traits.js</em> introduces traits without also introducing classes.
           In this library, traits are like Javascript's functions:
           anonymous, first-class and freely lexically nestable.
           
        <p>What about the roles of classes not normally supported by traits, such as
           instance-private state and constructors to initialize that state?
           These roles are already supported by Javascript's functions: you can nest
           traits inside functions that close over the required state, and you can use
           the function body as the "constructor".
           Here's an obligatory 'point-and-color' example:
<pre class="prettyprint lang-js noborder">
function makeColorTrait(col) {
  return Trait({
    color: function() { return col; }
  });
}
function makePoint(x, y) {
  return Trait.create(      // create an instance of a trait
   Object.prototype,        // that inherits from Object.prototype
   Trait.compose(           // and is the composition of
     makeColorTrait('red'), // a color trait
     Trait({                // and an anonymous point trait
       getX: function() { return x; },
       getY: function() { return y; },
       toString: function() { return ''+x+'@'+y; }               
     })));
}
var p = makePoint(0,2);
p.color() // 'red'
</pre>
           
    <h4>Compatibility</h4>
           
        <p><em>traits.js</em> is designed to work with the new object manipulation API
         defined in Ecmascript-262, Edition 5. However, the library is
         backwards-compatible with Edition 3.
         The library does not depend on any browser-specific features.
         To see if it works in your browser, just
         <a href="test.html">run the unit tests</a>.
      
         <!-- AddThis Button BEGIN -->
         <p><a style="float: right" class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4bba2a662567686a"><img src="http://s7.addthis.com/static/btn/v2/lg-bookmark-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4bba2a662567686a"></script>
         <!-- AddThis Button END -->
      
      </div><!-- End content -->
    </div><!-- End main content wrapper -->

    <div class="clearer"></div>
  </div><!-- End container -->

  <div id="contentBottom"></div>

  <div id="footer">
    <!-- Start Footer -->

    <p>© 2010 <a href="http://es-lab.googlecode.com">es-lab</a> |
    Code: <a href=
    "http://www.apache.org/licenses/LICENSE-2.0">Apache License
    2.0</a> | Content: <a href=
    "http://creativecommons.org/licenses/by/3.0/">Creative Commons
    3.0 BY</a></p>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4bba2a1002c95447"></script>
    <!-- AddThis Button END -->
    </p>

    <div id="breadcrumbcontainer">
      <!-- Start the breadcrumb wrapper -->
    </div><!-- End breadcrumb -->
  </div><!-- End Footer -->
  <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-7331943-5']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

  </script>
</body>
</html>
